<template>
	<div>
		<div class="Search">
			<div class="nav">
				<div class="nav_left">
					<div class="iconfont icon-fanhui" @click="gettply"></div>
					<span>返回</span>
				</div>
				<div class="nav_centen">
					<p class="centen">搜索</p>
				</div>
				<div class="nav_rigth">
					<div class="iconfont icon-shujia" @click="shujia"></div>
					<div class="iconfont icon-home" @click="gettplylists"></div>
				</div>
			</div>
			<div class="input">
				<div class="input_left">
					<input type="text" v-model="valuedata" placeholder="请输入搜索内容" />
					<div class="iconfont icon-sousuo"></div>
				</div>
				<div class="input_rigth" @click="GetButton">确定</div>
			</div>
			<div class="Recommend">
				<div class="div">
					<div class="Recommend_left">热门推荐</div>
					<div class="Recommend_rigth" @click="Getshow">
						<p>换一换</p>
						<p class="iconfont icon-huan"></p>
					</div>
				</div>
				<div class="Recommend_ul" v-if="showlist">
					<ul>
						<li v-for="(item, index) in this.lists" :key="index" @click="getbookinfo(item.book)">
							{{ item.word }}
						</li>
					</ul>
				</div>
				<div class="Recommend_ul" v-else>
					<ul>
						<li v-for="(item, index) in this.listsdata" :key="index" @click="getbookinfo(item.book)">
							{{ item.word }}
						</li>
					</ul>
				</div>
			</div>
			<div class="Recommend">
				<div class="div">
					<div class="Recommend_left">搜索历史</div>
					<div class="Recommend_rigth"  @click="GetDel">
						<p>删除历史</p>
						<p class="iconfont icon-lajixiang"></p>
					</div>
				</div>
				<div class="div_ul">
					<ul>
						<li v-for="(item, index) in this.History" :key="index">{{ item.obj }}</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			valuedata: '',
			lists: null,
			listsdata: null,
			showlist: true,
			ullists: null,
			History: [],
		};
	},
	methods: {
		gettply() {
			this.$router.replace('/Male');
			this.$store.commit('showlists', (this.showlists = false));
		},
		Getshow() {
			this.showlist = !this.showlist;
		},
		shujia() {
			this.$router.push({
				path: '/Bookdetails/Bookshelf',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		gettplylists() {
			this.$router.replace('/Male');
			this.$store.commit('showlists', (this.showlists = false));
		},
		GetButton() {
			if (this.valuedata == '') {
				return;
			}
			this.$router.push({
				path: '/Search/Searchlist',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
			this.$store.commit('showlists', (this.showlists = true));
			localStorage.setItem('valuedata', this.valuedata);
			let obj = this.valuedata;
			if (localStorage.getItem('History') == null || localStorage.getItem('History') == '') {
				this.History.push({ obj });
				localStorage.setItem('History', JSON.stringify(this.History));
				return;
			}
			(this.History = ''), (this.History = JSON.parse(localStorage.getItem('History')));
			this.History.push({ obj });
			localStorage.setItem('History', JSON.stringify(this.History));
		},
		getbookinfo(id) {
			localStorage.setItem('boosk_id', id);
			this.$router.push({
				path: '/Bookdetails',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		GetDel(){
			this.History = [],
			localStorage.removeItem('History');
		}
	},
	created() {
		this.$store.commit('showlists', (this.showlists = true));
		this.$axios.get('http://novel.kele8.cn/hot-books').then((data) => {
			this.lists = data.data.newHotWords.slice(0, 3);
			this.listsdata = data.data.newHotWords.slice(3, 6);
		});
		let obj = JSON.parse(localStorage.getItem('History'));
		if (obj != null) {
			this.History = obj;
		}
	},
};
</script>

<style lang="less" scoped>
.Search {
	width: 640px;
	.nav {
		width: 640px;
		background-color: #b83320;
		display: flex;
		justify-content: space-between;
		.nav_left {
			flex: 0 0 100px;
			display: flex;
			.iconfont {
				font-size: 30px;
				line-height: 70px;
				color: #fff;
				margin-left: 10px;
			}
			span {
				line-height: 70px;
				color: #fff;
				font-size: 16px;
			}
		}
		.nav_centen {
			flex: 1;
			margin: 15px 0;
			// background: #999;
			display: flex;
			.centen {
				margin: 0 auto;
				color: #fff;
				margin-top: 8px;
				font-size: 18px;
			}
		}
		.nav_rigth {
			flex: 0 0 100px;
			display: flex;
			// background-color: #e9e9e9;
			.iconfont {
				font-size: 28px;
				line-height: 70px;
				margin: 0 auto;
				color: #fff;
			}
			div:nth-child(2) {
				font-size: 35px;
			}
		}
	}
	.input {
		display: flex;
		justify-content: space-between;
		.input_left {
			position: relative;
			height: 60px;
			padding: 40px 18px;
			input {
				height: 100%;
				width: 500px;
				display: inline-block;
				border-radius: 50px;
				text-indent: 50px;
				border: none;
				background-color: #ebebf0;
			}
			div {
				position: absolute;
				top: 38%;
				left: 30px;
				font-size: 35px;
				color: #748389;
			}
		}
		.input_rigth {
			flex: 1;
			font-size: 28px;
			// background-color: #b83320;
			line-height: 143px;
			color: #748389;
		}
	}
	.Recommend {
		.div {
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			.Recommend_left {
				font-size: 32px;
				color: #748389;
			}
			.Recommend_rigth {
				display: flex;
				line-height: 50px;
				color: #748389;
				font-size: 20px;
				.iconfont {
					margin: 0 5px;
					font-size: 20px;
					font-weight: bold;
				}
			}
		}
		.Recommend_ul {
			padding-top: 28px;
			margin-bottom: 34px;
			ul {
				width: 98%;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				font-size: 28px;
				li {
					background-color: #ebebf0;
					padding: 14px 20px;
					margin: 12px 30px;
					text-align: center;
					border-radius: 50px;
					color: #748389;
				}
			}
		}
		.div_ul {
			width: 90%;
			margin: 0 auto;
			color: #748389;
			ul {
				width: 100%;
				li {
					padding: 25px 0;
					border-bottom: 1px solid #999;
					font-size: 24px;
				}
			}
		}
	}
}
</style>
